<template>
  <div class="hospital">
    <div>
      <img style="width: 100%;vertical-align: top;" src="../../assets/banner/new_banner_process_2.png"/>
    </div>
    <van-form class="hospital-form" @submit="saveMindFunc">
      <!-- 测评及报告 -->
      <div class="hospital-one">
        <div class="flex flex-left align-center hospital-one-title"><i class="hospital-one-title-i"></i>测评及报告</div>
        <div class="hospital-one-content">
          <van-field
              v-model="blContent"
              rows="4"
              autosize
              :readonly="userType == 1"
              type="textarea"
              :border="false"
              placeholder="请输入测评及报告"
              :rules="[{ required: true, message: '请输入测评及报告',trigger:'onSubmit' }]"
          />
        </div>
      </div>
      <!-- 医生评估建议 -->
      <div class="hospital-two">
        <div class="flex flex-left align-center hospital-two-title"><i class="hospital-two-title-i"></i>医生评估建议</div>
        <div class="hospital-one-content">
          <van-field
              v-model="jyContent"
              rows="4"
              autosize
              :readonly="userType == 1"
              type="textarea"
              :border="false"
              placeholder="请输入医生评估建议"
              :rules="[{ required: true, message: '请输入医生评估建议',trigger:'onSubmit' }]"
          />
        </div>
      </div>
      <!-- 安宁疗护简介 -->
      <div class="hospital-two">
        <div class="flex flex-left align-center hospital-one-title"><i class="hospital-one-title-i"></i>安宁疗护简介</div>
        <div class="flex flex-between hospital-one-content">
          <div class="hospital-one-content-img">
            <img src="../../assets/process/pic_process_2.png" alt="" >
          </div>
          <van-field
              v-model="jjContent"
              rows="4"
              autosize
              :readonly="userType == 1"
              type="textarea"
              :border="false"
              placeholder="请输入安宁疗护简介"
              :rules="[{ required: true, message: '请输入安宁疗护简介',trigger:'onSubmit' }]"
          />
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="hospital-btn" v-if="userType == 0">
        <van-button type="primary" size="large" style="height:100%;" color="#42DDA2" :loading="isLoading"
                    native-type="submit">保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {createApp} from 'vue';
import {Toast} from 'vant';

const app = createApp();
app.use(Toast);
import {queryOneReport, saveProcessOne} from '@/api'

export default {
  data() {
    return {
      blContent: '',
      jyContent: '',
      jjContent: '',
      patientId: '',
      processId: '',
      isLoading: false,
      userType: '',
    }
  },
  created() {
    this.patientId = this.$route.query.userid;
    this.processId = this.$route.query.processid;
    this.userType = JSON.parse(sessionStorage.getItem('userInfo')).userType;
    this.queryOneReportFunc();
  },
  methods: {
    // 获取单条数据
    queryOneReportFunc() {
      let data = 'processId=' + this.processId + '&userId=' + this.patientId;
      queryOneReport(data).then(res => {
        console.log('数据', res.data);
        if (res.data) {
          let aData = res.data.baseProcessDataJson;
          this.blContent = aData.reportInfo;
          this.jyContent = aData.suggestOfDoctor;
          this.jjContent = aData.treatmentIntro;
        }
      })
    },
    // 保存心理评测
    saveMindFunc() {
      let aJson = {
        reportInfo: this.blContent,
        suggestOfDoctor: this.jyContent,
        treatmentIntro: this.jjContent
      }
      let data = {
        userId: this.patientId,
        processId: this.processId,
        processData: JSON.stringify(aJson)
      }
      this.isLoading = true;
      saveProcessOne(data).then(res => {
        console.log('res', res)
        this.$toast('保存成功！');
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000)
      }).catch(() => {
        this.isLoading = false
      })
    }
  }
}
</script>
<style scoped>
.hospital {
  width: auto;
  height: auto;
  padding: 0px 0px 80px;
  background-color: #F1F1F1;
  margin-bottom: 0px !important;
}

.hospital-form{
  width: auto;
  height: auto;
  padding: 0 10px;
}
.hospital-one, .hospital-two {
  width: 100%;
  height: auto;
}

.hospital-one-title, .hospital-two-title {
  width: 100%;
  height: auto;
  color: #111;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  padding: 20px 0 0;
}
.hospital-one-title-i,.hospital-two-title-i{
  width: 5px;
  height: 13px;
  background-color: #000;
  margin-right: 5px;
  margin-left: 5px;
}

.hospital-one-content {
  width: 100%;
  height: auto;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ececec;
  background-color: #fff;
}

.hospital-one-content-img{
  width: auto;
  height: auto;
  padding: 10px 0px 10px 10px;
}

.hospital-one-content-img img{
  width: 143px;
  height: auto;
  vertical-align: top;
}

.hospital-two {
  margin-top: 20px;
}

.hospital-two-content {
  width: 100%;
  height: auto;
  margin-top: 15px;
  margin-left: 15px;
}

.hospital-btn {
  position: fixed;
  bottom: 20px;
  width: 355px;
  height: 40px;
}
</style>
